@import '@css/base.scss';

.city-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    .tab{
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 20px;
        background-color: #fff;
        .tab-item{
            flex: 1;
            text-align: center;
            font-size: 26px;
            span{
                padding: 12px 0;
            }
            &.active{
                span{
                    color: $baseColor;
                    border-bottom: 4px solid $baseColor;
                }
            }
        }
    }
    .swiper-container{
        width: 100%;
        height: 100%;
        .swiper-slide{
            width: 100%;
        }
    }
    .internal{
        position: relative;
        .wrapper{
            position: relative;
            height: 100%;
            overflow-y: scroll;
        }
        .area{
            .title{
                padding: 0 80px 0 20px;
                line-height: 60px;
            }
            .body{
                padding: 0 80px 20px 20px;
                background-color: #fff;
                display: flex;
                flex-wrap: wrap;
                .btn{
                    margin-top: 20px;
                    margin-right: 20px;
                    padding: 20px 40px;
                    border: 2px solid #ddd;
                    font-size: 28px;
                }
                &.cities{
                    display: block;
                    .city{
                        font-size: 30px;
                        line-height: 80px;
                        border-top: 2px solid #f5f5f5;
                    }
                }
            }
        }
        .now-letter{
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: $baseColor;
            color: #fff;
            font-size: 40px;
            border-radius: 50%;
        }
    }
}